<template>
  <div class="min-content mui-scroll-wrapper mui-slider-group">
    <div class="mui-scroll">
      <div class="warn">请认真选择，选择结果会影响贷款结果。</div>
      <!-- 职业 -->
      <div class="title">
        <span class="text">1 你的职业是？</span>
        <span class="red">*</span>
      </div>
      <mt-radio :class="loanInfoStatus.professionValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.professionValue"
        :options="professionOptions">
      </mt-radio>
      <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;"  v-show="loanInfoStatus.professionValue">请选择选项</div>
      <!-- 征信 -->
      <div class="title">
        <span class="text">2 你近两年的征信记录如何？</span>
        <span class="red">*</span>
      </div>
      <mt-radio :class="loanInfoStatus.creditValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.creditValue"
        :options="creditOptions">
      </mt-radio>
      <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;" v-show="loanInfoStatus.creditValue">请选择选项</div>
      <!-- 住房状态如何 -->
      <div class="title">
        <span class="text">3 你的住房状态如何？</span>
        <span class="red">*</span>
      </div>
      <mt-checklist :class="loanInfoStatus.housingValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.housingValue"
        :options="housingOptions">
      </mt-checklist>
      <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;" v-show="loanInfoStatus.housingValue">请选择选项</div>
      <!-- 你有缉纳社保吗？ -->
      <div class="title">
        <span class="text">4 你有缴纳社保吗？</span>
        <span class="red">*</span>
      </div>
      <mt-radio :class="loanInfoStatus.securityValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.securityValue"
        :options="securityOptions">
      </mt-radio>
       <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;" v-show="loanInfoStatus.securityValue">请选择选项</div>
      <!-- 你有缉纳公积金吗？ -->
      <div class="title">
        <span class="text">5 你有缴纳公积金吗？</span>
        <span class="red">*</span>
      </div>
      <mt-radio :class="loanInfoStatus.fundValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.fundValue"
        :options="fundOptions">
      </mt-radio>
       <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;" v-show="loanInfoStatus.fundValue">请选择选项</div>
      <!-- 你的月收入范围是？ -->
      <div class="title">
        <span class="text">6 你的月收入范围是？</span>
        <span class="red">*</span>
      </div>
      <mt-radio :class="loanInfoStatus.incomeValue ? 'mint-radiolist-error':''"
        title=""
        v-model="loanInfo.incomeValue"
        :options="incomeOptions">
      </mt-radio>
      <!-- error -->
      <div style="margin-left:12px;color:#ff6a27;" v-show="loanInfoStatus.incomeValue">请选择选项</div>
      <!-- 确认按钮 -->
      <mt-button type="primary" size="large" class="tijiao" @click="handleLoanInfo">提交</mt-button>
    </div>
  </div>
</template>
<script>
  import mui from 'static/js/mui'
  import { Radio } from 'mint-ui'
  import { Checklist } from 'mint-ui'
  import { Toast } from 'mint-ui'
  import { saveLoanInfo } from '@/api/user'
  import storage from '@/utils/localstorage'
  export default {
        components: {
            'mt-radio':Radio,
            'mt-checklist': Checklist
        },
        data() {
            return {
              loanInfo:{
                professionValue:'',
                creditValue:'',
                housingValue:[],
                securityValue:'',
                fundValue:'',
                incomeValue:''
              },
              loanInfoStatus:{
                professionValue:false,
                creditValue:false,
                housingValue:false,
                securityValue:false,
                fundValue:false,
                incomeValue:false
              },
              requestParams: {
                customerId: '',
                information: ''
              },
              professionOptions: [
                {
                  label: '公务员、事业单位',
                  value: '0',
                },
                {
                  label: '企业主',
                  value: '1'
                },
                {
                  label: '个体户',
                  value: '2'
                },
                {
                  label: '上班族',
                  value: '3'
                },
                {
                  label: '自由职业者',
                  value: '4'
                },
                {
                  label: '其他',
                  value: '5'
                }
              ],
              creditOptions: [
                {
                  label: '信用良好(无逾期)',
                  value: '0',
                },
                {
                  label: '1-3次逾期',
                  value: '1'
                },
                {
                  label: '3-6次逾期',
                  value: '2'
                },
                {
                  label: '6-9次逾期',
                  value: '3'
                },
                {
                  label: '9次以上逾期',
                  value: '4'
                }
              ],
              housingOptions: [
                {
                  label: '自有全款（本地）',
                  value: '0',
                },
                {
                  label: '自有全款（本地无，省内有房产）',
                  value: '1'
                },
                {
                  label: '自有贷款（本地）',
                  value: '2'
                },
                {
                  label: '自有贷款（本地无，省内有房）',
                  value: '3'
                },
                {
                  label: '父母全款房产（本地）',
                  value: '4'
                },
                {
                  label: '父母全款房产（本地无，省内有房产）',
                  value: '5'
                },
                 {
                  label: '父母贷款房产（本地）',
                  value: '6'
                },
                {
                  label: '父母贷款房产（本地无，省内有房产）',
                  value: '7'
                },
                {
                  label: '租赁',
                  value: '8'
                }
              ],
              securityOptions: [
                {
                  label: '有社保(6个月以上)',
                  value: '0',
                },
                {
                  label: '有社保(6个月以下)',
                  value: '1'
                },
                {
                  label: '无社保',
                  value: '2'
                }
              ],
              fundOptions: [
                {
                  label: '有公积金(6个月以上)',
                  value: '0',
                },
                {
                  label: '有公积金(6个月以下)',
                  value: '1'
                },
                {
                  label: '无公积金',
                  value: '2'
                }
              ],
              incomeOptions:[
                {
                  label: '3000元以下',
                  value: '0',
                },
                {
                  label: '3000-5000元',
                  value: '1'
                },
                {
                  label: '5000-8000元',
                  value: '2'
                },
                {
                  label: '8000元-12000元',
                  value: '3'
                }, 
                {
                  label: '12000元-20000元',
                  value: '4'
                },
                {
                  label: '20000元以上',
                  value: '5'
                }
              ]
            }
        },
        props: {},
        watch: {},
        methods:{
          handleLoanInfo() {
            //验证处理,返回错误信息
            let that = this
            let msg = ''
            for (var i in this.loanInfo) { 
              if(this.loanInfo[i] == '' || this.loanInfo[i] == []) {
                msg = '您有未选择的选项'
                this.loanInfoStatus[i] = true
              }else{
                this.loanInfoStatus[i] = false
              }
            }
            if(msg){
              Toast(msg)
            }else{
              mui.confirm("亲，确定要提交吗？提交后不可修改","",["取消","确定"], function (e) {
                if (e.index == 1) {   
                  that.requestParams.customerId = storage.getLocalstorage('user').id
                  that.requestParams.information = JSON.stringify(that.loanInfo)
                  saveLoanInfo(that.requestParams).then(res=>{
                    if(res.msg == 'success'){
                      mui.alert('提交成功', '提示', ['确定'],function(){
                          that.$router.push('/min')
                      },'div');
                    }
                  })
                }
              },'div')
            }
          }
        },
        filters: {},
        computed: {},
        created() { 
        },
        mounted() {
            mui.init({
            keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            });
           
            mui.back = function() {
              history.go(-1)
            };
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() {}
    }
</script>

<style lang="scss" scoped>
.warn{
  width:100%;
  height:25px;
  font-size:13px;
  line-height:25px;
  background:#FFEFBD;
  color:#333333;
  padding-left:13px;
}
//标题
.title{
  font-size:14px;
  padding-left:13px;
  margin-top:11px;
  font-weight: bold;
}
.title .text{
  color:#333333;
}
.title .red{
  color:#ff6a27;
  font-size:20px;
  position: relative;
  top:5px;
}
//单选
.mint-radiolist{
  margin-left:12px;
  margin-right:12px;
}
.mint-checklist{
  margin-left:12px;
  margin-right:12px;
}

.mint-radiolist-error{
  border: 1px solid #ff6a27;
}
//提交
.tijiao{
  margin-top:30px;
  margin-bottom:30px;
  height:40px;
  width:94%;
  left:3%;
  position: relative;
}
</style>

